<template>
  <page-view class="flex flex-col">
    <title-bar :show-back="true">购物车列表</title-bar>
    <my-loading :isLoading="isFirstLoading">
      <div class="flex-1 overflow-auto pb-[var(--van-submit-bar-height)]">
        <Tabs animated v-model:active="selectedIndex">
          <Tab title="购物车列表">
            <List
                finished-text="数据已经加载完毕"
                :loading="isLoading"
                :finished="finished"
                @load="loadNextShopCartPage">
              <TransitionGroup leave-active-class="animate__animated animate__bounceOutLeft">
                <SwipeCell v-for="item in shopCartListData" :key="item.id">
                  <Card
                      :thumb="baseURL + item.foodInfo.food_img"
                      :title="item.foodInfo.food_name"
                      :price="item.foodInfo.price">
                    <template #tags>
                      <Stepper
                          @plus="plusOne(item.fid)"
                          @minus="minusOne(item.fid)"
                          class="num-box" min="1" max="100" v-model="item.count" theme="round"
                          button-size="16">
                      </Stepper>
                    </template>
                    <template #num>
                      <span class="text-red-500">小计：{{ item.foodInfo.price * item.count }}</span>
                    </template>
                  </Card>
                  <template #right>
                    <Button type="danger" square class="h-full"
                            @click="deleteCurrentItem(item.id)">删除
                    </Button>
                  </template>
                </SwipeCell>
              </TransitionGroup>
            </List>
          </Tab>
          <Tab title="地址列表">
            <AddressList
                v-model="chosenAddressId"
                :list="myAddressInfoList">
            </AddressList>
          </Tab>
        </Tabs>
      </div>
      <SubmitBar :price="totalMoney" button-text="提交订单" @submit="submitOrder">提交订单</SubmitBar>
    </my-loading>

  </page-view>
</template>
<script>
import {Tab, Tabs, Card, Stepper, SwipeCell, Button, Dialog, SubmitBar, List, AddressList, Notify, Toast} from "vant";
import API from "@/utils/API";

export default {
  name: "ShopCartList",
  inject: ["baseURL"],
  data() {
    return {
      test: 3,
      pageIndex: 1,
      pageCount: 0,
      shopCartListData: [],
      isLoading: false,
      isFirstLoading: true,
      // 我的地址列表
      myAddressInfoList: [],
      // 选择地址的id
      chosenAddressId: "",
      // tab页面的选中的那个索引
      selectedIndex: 0,
    }
  },
  computed: {
    totalMoney() {
      let sum = 0;
      this.shopCartListData.forEach(item => {
        sum += item.count * item.foodInfo.price;
      });
      return sum * 100;
    },
    finished() {
      return this.pageIndex >= this.pageCount;
    }
  },
  created() {
    // 获取我的购物车
    this.getShopCartListByPage({pageIndex: this.pageIndex});
    //获取我的地址
    this.getMyAddressInfoList();
  },
  methods: {
    async getShopCartListByPage({pageIndex}) {
      let result = await API.shopCart.getShopCartListByPage({pageIndex});
      this.pageCount = result.pageCount;
      this.shopCartListData.push(...result.listData);
      this.isFirstLoading = false;
    },
    async deleteCurrentItem(id) {
      Dialog.confirm({
        title: "请确认",
        message: "你确定要删除这一项吗"
      }).then(async () => {
        await API.shopCart.deleteMyShopCartFoodById(id);
        //这个时候的页面如果要刷新有2种方案，第一种重新请求数据【这种体验不好】
        //第二种，在数据当中找到这一项，删除
        let index = this.shopCartListData.findIndex(item => item.id === id);
        if (index != -1) {
          this.shopCartListData.splice(index, 1);
        }
      }).catch(() => {
      })

    },
    // 购物车当前物品加一个
    plusOne(fid) {
      API.shopCart.addToShopCart({fid, count: 1});
    },
    // 购物车当前物品减一个
    minusOne(fid) {
      API.shopCart.addToShopCart({fid, count: -1});
    },
    loadNextShopCartPage() {
      this.pageIndex++;
      this.getShopCartListByPage({pageIndex: this.pageIndex});
    },
    async getMyAddressInfoList() {
      let result = await API.addressInfo.getMyAddressInfoList();
      let list = result.map(item => {
        return {
          id: item.id,
          name: item.person_name,
          tel: item.phone,
          address: item.address,
          tag: item.tag
        }
      })
      this.myAddressInfoList = list;
    },
    async submitOrder() {
      // 提交订单之前,一定要看一下当前的用户有没有选择地址
      if (this.chosenAddressId) {
        // 第一步:先构建要提交的订单的参数
        let orderData = {
          aid: this.chosenAddressId,
          foodList: this.shopCartListData.map(item => {
            return {
              fid: item.fid,
              count: item.count
            }
          })
        }
        await API.orderInfo.submitOrder(orderData);
        Toast.success("订单提交成功");
        this.$router.replace({name: "Order"});
      } else {
        Notify({
          type: "warning",
          message: "请先选择地址"
        });
        this.selectedIndex = 1;
      }
    },
  },
  components: {
    Tab, Tabs, Card, Stepper, SwipeCell, Button, SubmitBar, List, AddressList
  }
}
</script>
<style scoped lang="scss">
.num-box {
  margin-top: 20px;
}

// 样式穿透
:deep(.van-address-list__bottom) {
  display: none;
}
</style>